<template>
  <div class="login">
    <div class="left">
      <div class="left-bg"></div>
    </div>
    <div class="right">
      <div class="avtor">
        <n-icon :size="80"
                :component="PersonCircleSharp">
        </n-icon>

      </div>
      <div class="form">
        <Transition>
          <SignIn v-if="typeRef=='signIn'"></SignIn>
          <SignUp v-else></SignUp>
        </Transition>
      </div>
      <div style="margin-top:30px;">
        <div v-if="typeRef=='signIn'">
          Don't you have an account?
          <n-button text
                    type="primary"
                    size="large"
                    @click="gotoSignUp()">
            Sing Up
          </n-button>
        </div>
        <div v-if="typeRef=='signUp'">
          Do you have an account?
          <n-button text
                    type="primary"
                    size="large"
                    @click="gotoSignIn()">
            Sing In
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from "vue";
import { NButton, NIcon } from "naive-ui";
import SignIn from "./signin.vue";
import SignUp from "./signup.vue";
import { PersonCircleSharp } from "@vicons/ionicons5";

const typeRef = ref<string>("singIn");
function gotoSignIn() {
  typeRef.value = "signIn";
}
function gotoSignUp() {
  typeRef.value = "signUp";
}
onBeforeMount(() => {
  typeRef.value = "signIn";
});
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  background: #eee;

  .left {
    position: relative;
    flex: 1;
    // padding: 100px 50px;
    .left-bg {
      width: 100%;
      height: 100%;
      background-image: url("@/assets/login-2.svg");
      background-size: cover;
      background-repeat: no-repeat;
      background-origin: content-box;
      filter: opacity(1);
      // border-radius: 30px;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      background-color: white;
    }
  }
  .right {
    width: 50%;
    text-align: center;
    padding: 50px 30px;

    .form {
      min-width: 300px;
      max-width: 500px;
      margin: 0 auto;
    }
  }
}
</style>